<template>
  <div>
    <a-card>
      <template v-if="listData.length === 0">
        <a-empty :description="false" />
      </template>
      <a-list
        item-layout="vertical"
        size="large"
        :pagination="pagination"
        :data-source="listData"
        :locale="{ emptyText: '暂无文章' }"
        :loading="loading"
      >
        <a-list-item
          :loading="loading"
          slot="renderItem"
          key="item.title"
          slot-scope="item, index"
        >
          <template slot="actions">
            <a-icon type="calendar" />
            {{ item.createTime }}
            <span
              @click="articleAction(item.id, 'collection', item.isCollection)"
            >
              <a-icon
                type="star"
                style="margin-right: 8px;"
                :style="{ color: item.isCollection ? 'red' : '' }"
              />
              {{ item.collection }}
            </span>
            <span @click="articleAction(item.id, 'praise', item.isPraise)">
              <a-icon
                type="like"
                style="margin-right: 8px;"
                :style="{ color: item.isPraise ? 'red' : '' }"
              />
              {{ item.praise }}
            </span>
            <span>
              <a-icon type="message" style="margin-right: 8px;" />
              {{ item.comment }}
            </span>
          </template>

          <!--           <img
            slot="extra"
            width="272"
            alt="logo"
            src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
          /> -->

          <a-list-item-meta :description="item.author">
            <!-- <a slot="title" @click="trunDetail(item.id)">{{ item.title }}</a> -->
            <a slot="title" @click="getDetails(item.id)">{{
              item.title
            }}</a>

            <a slot="avatar" @click="getUser(item.userId)">
              <a-avatar
                style="cursor: pointer"
                shape="square"
                size="large"
                :src="item.avatar ? item.avatar:''"
                :style="{
                  backgroundColor: item.avatar ? 'white' : 'green',
                  verticalAlign: 'middle',
                }"
              >
                <span style="cursor: pointer">{{ item.author }}</span>
              </a-avatar>
            </a>
            
          </a-list-item-meta>
          <!-- <span v-html="item.details" class="m-details"></span> -->
        </a-list-item>
        <a-spin v-if="loading" class="demo-loading" />
      </a-list>
    </a-card>
  </div>
</template>
<script>
import { getArticleList } from "@/apis/article";
import { updateAction, getUserOperaList } from "@/apis/articleAction";
import { getToken } from "@/utils/auth";
const regex = /(<([^>]+)>)/gi;
export default {
  data() {
    return {
      listData: [],
      loading: true,
      type: "主页",
      currentPage: 1,
      search: '',
      pagination: {
        current: 1,
        limit: 5,
        total: 0,
        pageSize: 5,
        hideOnSinglePage: true,
        onChange: (page) => {
          let data = {
            page: page,
            limit: this.pagination.limit,
            type: this.type,
          };
          this.loading = true;
          getArticleList(data).then((res) => {
            this.listData = res.data.list.map((i) => {
              i.details = i.details.replace(regex, "");
              this.$set(i, "isPraise", false);
              this.$set(i, "isCollection", false);
              return i;
            });
            this.currentPage = page;
            this.pagination.current = page;
            this.pagination.total = res.data.total;
            this.loading = false;
            $(window).scrollTop(0);
          });
          this.pagination.current = this.currentPage;
          this.userOperaList();
        },
      },
      actions: [
        { type: "star-o", text: "156", color: "red" },
        { type: "like-o", text: "156" },
        { type: "message", text: "2" },
      ],
    };
  },
  components: {},
  computed: {
    userId() {
      return this.$store.getters.id;
    },
  },
  methods: {
    handleClick() {
      this.loading = !this.loading;
    },
    trunDetail(id) {
      this.$store.commit("hiddenEditor");
      this.$store.commit("showComment");
      this.$emit("id", id);
    },
    getList() {
      this.loading = true;
      let type = "";
      let key = this.$route.path;
      if (key === "/") type = "主页";
      else if (key === "/ArticleListTable/front") type = "前端";
      else if (key === "/ArticleListTable/rear") type = "后端";
      // else if (key === "/ArticleListTable/fsr4") type = "FSR 4.0";
      else if (key === "/ArticleListTable/solve") type = "疑问1";
      else if (key === "/ArticleListTable/unsolve") type = "疑问0";
      else if (key === "/ArticleListTable/other") type = "其他技术";
      else if (key.indexOf("ArticleListTable/search") > -1) this.search = this.$route.query.context;
      let data = {
        page: this.currentPage,
        limit: 5,
        type,
      };
      if(this.search !== '') this.$set(data, "context", this.search);
      this.type = type;
      getArticleList(data).then((res) => {
        this.listData = res.data.list.map((i) => {
          i.details = i.details.replace(regex, "");
          this.$set(i, "isPraise", false);
          this.$set(i, "isCollection", false);
          return i;
        });
        this.pagination.total = res.data.total;
        this.loading = false;
        this.pagination.current = this.currentPage;
        if (getToken()) this.userOperaList();
      });
    },
    getDetails(id) {
      this.$router.push("/Details/"+id);
    },
    getUser(id) {
      this.$router.push("/User/"+id);
    },
    articleAction(articleId, method, opera) {
      let data = {
        userId: parseInt(this.userId),
        articleId,
      };
      if (method === "collection") {
        this.$set(data, "isCollection", !opera);
      }
      if (method === "praise") {
        this.$set(data, "isPraise", !opera);
      }
      updateAction(data).then((res) => {
        if (res.data) {
          this.getList();
          this.userOperaList();
          this.pagination.current = this.currentPage;
        }
      });
    },
    userOperaList() {
      this.$nextTick(() => {
        getUserOperaList(parseInt(this.userId)).then((res) => {
          let list = this.listData;
          let operaList = res.data;
          operaList.forEach((element) => {
            list.forEach((v) => {
              if (element.articleId === v.id) {
                this.$set(v, "isPraise", element.isPraise);
                this.$set(v, "isCollection", element.isCollection);
              }
            });
          });
        });
      });
    },
  },
  watch: {
    $route: function() {
      this.search = '';
      this.getList();
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped>
.m-details {
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
</style>
